<!--

  首页1的咨询

-->



<template>
  <qm-block class="qm-consult">
    <div slot="title" class="qm-consult-title">
      <img class="qm-consult-title-icon" src="static/img/home/icon-home-zixun.svg" alt="">
      资讯
    </div>
    <f7-link href="#" slot="after-title" style="color: var(--color-text-subtext)">
      更多资讯
      <f7-icon f7="chevron_right" style="font-size: var(--font-size-subcontent-2)"></f7-icon>
    </f7-link>

    <div class="qm-consult-content">
      <qm-top-three height="131" class="top-three">
        <div slot="one" class="one" v-if="data">
          <img class="one-img" :src="data[0].image" alt="" />
          <div class="one-bg"></div>
          <div class="top-three-info one-info">
            <div class="icon-box">
              <qm-sort class="info-icon" background="#fe5555">1</qm-sort>
            </div>
            <div class="info-title">{{ data[0].title }}</div>
          </div>
        </div>
        <div slot="two" class="two" v-if="data.length >= 2">
          <div class="top-three-info">
            <div class="icon-box">
              <qm-sort class="info-icon" background="#fe9b08">2</qm-sort>
            </div>
            <div class="info-title">{{ data[1].title }}</div>
          </div>
        </div>
        <div slot="three" class="three" v-if="data.length >= 3">
          <div class="top-three-info">
            <div class="icon-box">
              <qm-sort class="info-icon" background="#fdcc07">3</qm-sort>
            </div>
            <div class="info-title">{{ data[2].title }}</div>
          </div>
        </div>
      </qm-top-three>
    </div>

    <template v-if="afterThird">
      <qm-consult-list v-for="(item, index) in afterThird" :key="index" :data="item" :line="false"></qm-consult-list>
    </template>
  </qm-block>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
    },
  },
  data() {
    return {};
  },
  computed: {
    afterThird() {
      let afterThird = [];
      if (this.data.length > 3) {
        afterThird = this.data.slice(3);
        return afterThird;
      }
    },
  },
};
</script>


<style lang="less" scoped>
.qm-consult {
  &-title {
    display: inline-flex;
    align-items: center;

    &-icon {
      width: calc(37px * var(--ratio));
      height: calc(31px * var(--ratio));
      margin-right: calc(12px * var(--ratio));
    }
  }

  .top-three {
    padding: 0;
    margin: 0;

    .one,
    .two,
    .three {
      width: 100%;
      height: 100%;
      background: #F0F2F6;
    }

    .one {
      width: 100%;
      height: 100%;
      position: relative;

      &-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
      }

      &-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
      }

      &-info {
        position: absolute;
        bottom: 0;
        left: 0;

        .info-title {
          color: var(--color-text-base);
        }
      }
    }
  }
}

.top-three-info {
  padding: calc(20px * var(--ratio)) calc(15px * var(--ratio));
  display: flex;
  font-size: var(--font-size-maincontent);
  color: var(--color-text-title);

  .icon-box {
    height: 100%;

    .info-icon {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .info-title {
    margin-left: calc(9px * var(--ratio));
    display: table-cell;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
